<template>
  <div class="Dialog">
    <!-- 详情 -->
    <div v-if="btnNum === 1">
      <el-dialog title="详情" :visible.sync="isShow" width="50%" :show-close="showclose">
        <slot />
        <span slot="footer" class="dialog-footer">
          <el-button @click="done(1)">取 消</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 编辑 -->
    <div v-if="btnNum === 2">
      <el-dialog title="编辑" :visible.sync="isShow" width="50%" :show-close="showclose">

        <span slot="footer" class="dialog-footer">
          <el-button @click="done(1)">取 消</el-button>
          <el-button type="primary" @click="done(2)">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 删除 -->
    <div v-if="btnNum === 3">
      <el-dialog title="是否删除：" :visible.sync="isShow" width="30%" center :show-close="showclose">
        <slot />
        <span slot="footer" class="dialog-footer">
          <el-button @click="done(1)">取 消</el-button>
          <el-button type="primary" @click="removeItemById(rowlist.author,rowlist.id)">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Dialog',

  data() {
    return {
      // 右上角关闭按钮
      showclose: false
    }
  },

  computed: mapState({
    list: state => state.equipment.list,
    btnNum: state => state.equipment.btnNum,
    isShow: state => state.equipment.isShow,
    rowlist: state => state.equipment.rowlist
  }),
  methods: {
    ...mapMutations(['SET_IS_SHOW']),
    done(n) {
      this.SET_IS_SHOW()
    },
    removeItemById(name, id) {
      this.$store.commit('removeItem', id)
      this.SET_IS_SHOW()
      this.$notify({
        title: '成功',
        message: '删除' + name + '成功',
        type: 'success',
        duration: 3000
      })
    }
  }
}
</script>

<style scoped>

</style>
